<template>
	<view class="charts-box">
	  <br>
	  <p align="center" style="color:#7cb5ec">今日活跃 : {{dayValue}}人</p>
	  <qiun-data-charts
		type="pie"
		:chartData="chartData"
		background="none"
	  />
	  <p align="center" style="color:#7cb5ec">趋势图</p>
	  <qiun-data-charts
		type="line"
		:chartData="lineData"
		background="none"
	  />
	</view>
</template>

<script>
    export default {
        data() {
            return {
				dayValue : 0,
				chartData:{},
				lineData:{}
            }
        },
        methods: {
			onLoad() {
				this.getHistoryInfo()
			},
			getDayInfo(data){
				if(data){
					this.dayValue = 0
					this.chartData["series"][0]["data"] = []
					for(var i = 0;i < data.length;i++){
						if(data[i]["list"][data[i]["list"].length-1]["activeNum"]){
							this.chartData["series"][0]["data"].push({
								"name" : data[i]["des"],
								"value" : data[i]["list"][data[i]["list"].length-1]["activeNum"]
							})
							this.dayValue += data[i]["list"][data[i]["list"].length-1]["activeNum"]
						}
					}
				}
			},
			getHistoryInfo(){
				this.request("/history_info",{time:Date.now(),num:6},(res) => {
					this.chartData={
						"series": [
							{
								"data": []
							}
						]
					},
					this.lineData={
						"categories": [],
						"series": []
					}
					if(res.data){
						this.lineData = {"categories":[],"series":[]}
						for(var i = 0;i < res.data.length;i++){
							for(var j = 0;j < res.data[i]["list"].length;j++){
								if(res.data[i]["list"][j])
									res.data[i]["list"][j] = JSON.parse(res.data[i]["list"][j])
								if(!res.data[i]["list"][j]["activeNum"])
									res.data[i]["list"][j]["activeNum"] = 0
							}
							res.data[i]["list"].reverse()
						}
						this.getDayInfo(res.data)
						var allInfo = {
							name : "总活跃",
							data : []
						}
						for(var i = 0;i < res.data[0]["list"].length;i++){
							var d = new Date(res.data[0]["list"][i]["date"])
							var str = (d.getMonth() + 1) +"."+d.getDate()
							allInfo.data[i] = 0
							this.lineData["categories"].push(str)
						}
						for(var i = 0;i < res.data.length;i++){
							var info = {}
							info.name = res.data[i]["des"]
							info.data = []
							var num = 0
							if(res.data[i]["list"]){
								for(var j = 0;j < res.data[i]["list"].length;j++){
									if(res.data[i]["list"][j] && res.data[i]["list"][j]["activeNum"]){
										info.data[j] = res.data[i]["list"][j]["activeNum"]
										allInfo.data[j] += res.data[i]["list"][j]["activeNum"]
										num += allInfo.data[j]
									}else
										info.data[j] = 0
								}
							}
							if(num){
								this.lineData["series"].push(info)
							}
						}
						this.lineData["series"].push(allInfo)
						console.log(this.lineData)
					}
				})
			},
            // request请求
            request(path,options,success) {
				this.$axios.post(path,options)//传参
				.then(function(res){
					  success(res)
				})
				.catch(function(err){
					  console.log("请求失败233");
				});
            }
		}
    }
</script>

<style>
	/* #ifndef H5 */
	.charts-box{
	  width: 100%;
	  height:300px;
	}
	/* #endif */
</style>
